<script setup lang="ts">
import { ref } from 'vue'

const urlList = ref<{ url: string; name: string }[]>([
    {
        url: 'https://api.dl.dzng.com/file/PVBU3A8JCZ7OSRW1737100510884.png',
        name: '图片1.png',
    },
    {
        url: 'https://miniapp.qiluyidian.mobi/TY_1737357222263.docx',
        name: '文本.docx',
    },
    {
        url: 'https://img.qiluyidian.net/1732669950f2vjf3evqkovideo.mp4',
        name: '视频.mp4',
    },
])
const active = ref(-1)
</script>

<template>
    <div>
        <ul>
            <li
                v-for="(item, index) in urlList"
                :key="item.url"
                @click="active = index"
                :class="{ active: active === index }"
                v-preview="item"
            >
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<style scoped>
ul {
    list-style: none;
    text-align: left;
}
li {
    margin-bottom: 10px;
}
li:hover {
    color: #409eff;
    cursor: pointer;
}
li:active {
    color: #409eff;
}
</style>
